Create a html file.
<html>
<head></head>
<body>
</body>
</html>Add following code to html body.
<div id="creditCardIframe"></div>Add following code to html body.
<button id="submitButton"> click Me </button>Add following code to html body and replace Aptean js SDK url here with JS SDK url
- Staging: https://stg.js.apteansharedservices.com/apteanpay-js/v1
- Production: https://js.apteansharedservices.com/apteanpay-js/v1
<script src="<<<Aptean js SDK url here>>>"> </script>Add following code to html body.
<script>
// initialize Aptean Pay
const apteanPay = ApteanPay(
'<<<apim key here>>>', // api key
'<<<product id here>>>', // erp product id
'<<<tenant id here>>>' // tenant id
);
// style an iframe
// please see the "Style iFrame" document for more information on styling
var customStyle = {
styles: {
base: {
'border-radius': '4px',
height: '56px',
'font-size': '16px',
}
},
};
var cardComponentOptions = {
customStyle,
showPlaceholders: true,
showErrorMessages: true
};
// create builder objects
const components = apteanPay.components({});
const cardComponent = components.create('card', cardComponentOptions);
// mount the form to the DOM
cardComponent.mount(
'creditCardIframe', // div Id
'#submitButton' // button Id
);
// this method returns a callback function.
apteanPay.createTokenCallback(
cardComponent,
{
name: '<<<customer name here>>>', //mandatory to pass
addressLine1: '<<<customer addressLine1 here>>>',
addressLine2: '<<<customer addressLine2 here>>>',
addressCity: '<<<customer addressCity here>>>',
addressState: '<<<customer addressState here>>>',
addressZip: '<<<customer addressZip here>>>', //mandatory to pass
addressCountry: '<<<customer addressCountry here>>>', //mandatory to pass
emailAddress: '<<<customer emailAddress here>>>', //mandatory to pass
phoneCountryCode: '<<<customer phoneCountryCode here>>>',
phoneNumber: '<<<customer phoneNumber here>>>',
},
function(token, error) {
// error object
if (error) {
console.log(error);
}
// token object
if (token) {
console.log(token);
}
}
);
</script>
Provide one of the following test credit-Card information and click the button. Use any CVV/CVV2 number and expiration month year valid for the current year:
| Card Type | Card Number |
|---|---|
| Visa | 4111111111111111 |
| MasterCard | 5431111111111111 |
| Discover | 6011000991300009 |
| American Express | 341111111111111 |
| Diner's Club | 30205252489926 |
| JCB | 3541963594572595 |
| Maestro | 6799990100000000019 |
You can get the token id from the console as id field in json. These tokens are valid for only 15 minutes.
Success Token Response sample:
{id: "xxxxxxxx-0314-4a64-a974-9828c4a5c28d", created: 1612267767, livemode: false, type: "credit-card", used: false, …}Failure Token Response sample:
{type: "validation_error", message: "Parameter failed UI validation.", param: "expiration-year"}Once you have a valid token it can be saved as a long term token to be used for future payments if that is the desired use case. Call the following method - please refer the GraphQL Playground https://stg.api.apteanpay.com/ for full documentation:
mutation { createPaymentMethod(input: {attachToResourceId:"<<<tenant ID>>>",
isDefault:false,
token:"<<<token ID>>>"})
{
code
error
message
paymentMethod {id}
}
}You can use the following methods to simulate other responses for testing:
- To cause a declined message, pass an amount less than 1.00.
- To trigger a fatal error message, pass an invalid card number.
- To simulate an AVS match, pass 888 in the address1 field, 77777 for zip.
- To simulate a CVV match, pass 999 in the cvv field.